<!-- 增加管理员 -->
<script setup>
import { ref } from 'vue'
import { apiAdminReg } from '@/api/admin.js'
const adminName = ref()
const adminLoginName = ref()
const adminLoginPwd = ref()
const submitEvent = async () => {
  const res = await apiAdminReg({
    adminName: adminName.value,
    adminLoginName: adminLoginName.value,
    adminLoginPwd: adminLoginPwd.value
  })
  console.log(res)
  if (res.data.code === 200) {
    ElMessage.success('新增成功')
  }
  adminName.value = ''
  adminLoginName.value = ''
  adminLoginPwd.value = ''
}
</script>
<template>
  <div class="addBox">
    <el-input
      v-model="adminName"
      style="width: 500px; margin-top: 60px; height: 50px"
      placeholder="请输入姓名"
    />
    <el-input
      v-model="adminLoginName"
      style="width: 500px; margin-top: 60px; height: 50px"
      placeholder="请输入账号"
    />
    <el-input
      v-model="adminLoginPwd"
      style="width: 500px; margin-top: 60px; height: 50px"
      placeholder="请输入密码"
    />
    <button class="circle" @click="submitEvent()">新增</button>
  </div>
</template>
<style lang="scss" scoped>
.circle {
  background-color: #534c5860;
  color: #fff;
  position: relative;
  z-index: 1;
  overflow: hidden;
  width: 300px;
  height: 50px;
  margin-top: 50px;
  font-size: 20px;
  font-weight: 500;
  border: 1px solid #534c5860;
  border-radius: 20px;
  box-shadow: 0 0 20px #534c5860;
}

.circle::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: 3rem;
  height: 2rem;
  transform: translate3d(-50%, -50%, 0) scale(0, 0);
  border-radius: 50%;
  background-color: rgba(18, 18, 39, 0.267);
  transform-origin: center;
  transition: ease-in-out 0.6s;
}

.circle:hover::before {
  transform: translate3d(-50%, -50%, 0) scale(15, 15);
}
.circle:active {
  font-size: 18px;
  border: none;
  box-shadow: 0 0 5px rgb(87, 88, 88);
}
.addBox {
  background-color: #3b353f60;
  height: 800px;
  width: 600px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>
